<template>
	<view class="container">
		<text class="demo-title">示例二：卡片式/纵向轮播</text>
		<!--
			previous-margin/next-margin: 前/后边距，用于露出前后项
			display-multiple-items: 同时显示的滑块数量
			vertical: 是否纵向滑动
		-->
		<swiper class="card-swiper" :vertical="isVertical" previous-margin="60rpx" next-margin="60rpx" :circular="true"
			:display-multiple-items="2">
			<swiper-item class="item-a">
				<view class="swiper-item-content">
					<text class="item-text">卡片 1</text>
				</view>
			</swiper-item>
			<swiper-item class="item-b">
				<view class="swiper-item-content">
					<text class="item-text">卡片 2</text>
				</view>
			</swiper-item>
			<swiper-item class="item-c">
				<view class="swiper-item-content">
					<text class="item-text">卡片 3</text>
				</view>
			</swiper-item>
			<swiper-item class="item-a">
				<view class="swiper-item-content">
					<text class="item-text">卡片 1</text>
				</view>
			</swiper-item>
			<swiper-item class="item-b">
				<view class="swiper-item-content">
					<text class="item-text">卡片 2</text>
				</view>
			</swiper-item>
			<swiper-item class="item-c">
				<view class="swiper-item-content">
					<text class="item-text">卡片 3</text>
				</view>
			</swiper-item>
		</swiper>
		<button @click="toggleDirection" class="action-button">切换为{{ isVertical ? '横向' : '纵向' }}滑动</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVertical: false
			}
		},
		methods: {
			toggleDirection() {
				this.isVertical = !this.isVertical;
			}
		}
	}
</script>

<style>
	/* ...复用示例一的 .demo-title, .item-text, .item-a/b/c 样式... */
	.card-swiper {
		height: 350rpx;
		/* swiper 必须有明确的高度 */
	}

	.swiper-item-content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 为卡片添加圆角和缩放效果，使其更像卡片 */
		transform: scale(0.9);
		border-radius: 20rpx;
		transition: transform 0.3s;
	}

	/* current 激活的 swiper-item 会有一个 .swiper-item-active 的类 (非官方，是 Uni-app 的实现细节)，我们可以利用它 */
	.swiper-item-active .swiper-item-content {
		transform: scale(1);
	}

	.action-button {
		margin-top: 20rpx;
	}

	.item-a {
		background-color: #67C23A;
	}

	.item-b {
		background-color: #409EFF;
	}

	.item-c {
		background-color: #9049DE;
	}
</style>